<template>
  <HeaderNav active-index="5"></HeaderNav>
  <TaskContainer>
    <div class="toolbar">
      <el-button type="primary" @click="addClass">添加班级
        <template #icon>
          <el-icon>
            <CirclePlus/>
          </el-icon>
        </template>
      </el-button>
      <el-button type="danger" @click="batchRemove">批量删除
        <template #icon>
          <el-icon>
            <Delete/>
          </el-icon>
        </template>
      </el-button>
    </div>
    <el-table :data="list" style="width: 100%" border ref="tb">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="序号" width="80"/>
      <el-table-column prop="name" label="班级名"/>
      <el-table-column label="开班时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon>
              <timer/>
            </el-icon>
            <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="班主任" prop="manage" width="120"/>

      <el-table-column label="状态" prop="status" width="70">
        <template #default="scope">
          <el-tag type="success" effect="dark" v-if="scope.row.status">正常</el-tag>
          <el-tag type="info" effect="dark" v-else>毕业</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="课程时长(月)" prop="duration" width="120"/>
      <el-table-column label="预毕业时间" prop="graduate_time"/>

      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button type="warning" size="small" :disabled="!scope.row.status"
                     @click="handleGraduate(scope.$index, scope.row)">毕业
          </el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分页插件 -->
    <div style="margin: 20px 0;">
      <el-pagination background layout="prev, pager, next"
                     hide-on-single-page
                     :page-size="pagination.rows"
                     :pager-count="11"
                     v-model:current-page="pagination.page"
                     :total="1000"/>
    </div>
  </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"

export default {
  components: {
    HeaderNav,
    TaskContainer,
    Condition,
  },
  data() {
    return {
      pagination: {
        page: 1,
        rows: 20,
      },
      list: [
        {
          id: 1,
          create_time: '2016-05-03',
          graduate_time: '2016-05-04',
          name: 'Python2404',
          manage: "曹莉莉",
          duration: 6,
          status: false,
        },
        {
          id: 2,
          create_time: '2016-05-03',
          graduate_time: '2016-05-04',
          name: 'Python2402',
          manage: "王丹丹",
          duration: 6,
          status: true,
        },
      ]
    }
  },
  created() {
    window.$bus.on('close-win', (index) => {
      // 关闭弹出的窗口
      layer.close(index);
    });
  },
  methods: {
    addClass(event) {
      this.$layer.open({
        type: 2,
        title: '添加班级',
        shadeClose: true,
        shade: 0.5,
        area: ['650px', '360px'],
        btn: ['保存', '关闭'],
        content: '/clazz/add',
        yes: (index, layero) => {
          // 获取 打开的 弹出层 窗口对象
          let iframeWin = window[layero.find('iframe')[0]['name']];
          // 向 mitt 消息总线 发送 add-clazz 事件, 并传入 index 索引
          // 在 弹出的 clazz/add 页面中 监听 add-clazz、并完成 添加班级功能
          iframeWin.$bus.emit('add-clazz', index);
        }
      })
    },
    batchRemove(event) {
      let rows = this.$refs.tb.getSelectionRows();
      console.log(rows);
    }
  }
}
</script>

<style scoped>
.table-modules {
  padding: 10px 20px;
}

.table-modules span {
  padding: 2px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toolbar {
  position: relative;
  right: 10px;
  z-index: 200;
  text-align: right;
  margin: 20px;
  flex: 1 1 auto;
}
</style>